<template>
  <div class="topTime">
    <div v-for="(item, index) in timeTopArry" :key="index">
      {{ item.index }}
    </div>
    
  </div>
  <div class="meeting-showTime">
    <div class="leftTime">
      <div v-for="(item, index) in timeLeftArry" :key="index">
        {{ item }}
      </div>
    </div>
    <div
      v-for="(item, index) in this.timeBoxArry"
      :key="index"
      :class="renderclass(item)"
      @click="handleChoose(item)"
    ></div>
  </div>
</template>

<script>
import moment from "moment";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      timeBoxArry: [], //时间生成方块
      timeTopArry: [], //上方时间段
      timeLeftArry: ['0-15','15-30','30-45','45-60'], //左侧时间段
      timeArea: {
        start: "",
        end: "",
      }, //当前选择的时间段
      thismoment: {}, //当前时间
      useTime: [{ start_time: "6:00", end_time: "7:15" }],
    };
  },
  methods: {
    //生成时间段数组
    creatTime(startT, endT, interval) {
      let starTime = moment(startT, "HH:mm");
      let endTime = moment(endT, "HH:mm");
      let diff = endTime.diff(starTime, "minutes");
      let num = Math.ceil(diff / interval);
      var segs = [];
      for (let i = 1; i <= num; i++) {
        let timeFrom = starTime.clone().add((i - 1) * interval, "minutes");
        let timeTo = starTime.clone().add(i * interval, "minutes");
        let minutes = timeFrom.minutes();
        let hour = timeFrom.hour();
        segs.push({
          timeFromtt: timeFrom.format("HH:mm"),
          timeTott: timeTo.format("HH:mm"),
          timeFrom: timeFrom,
          timeTo: timeTo,
          // seg: minutes === 0 ? true : false,
          // title: (hour < 12 ? "上午" : "下午") + hour + '点'
          // title: hour + ":00",
          index: i < 10 ? "0" + i : i,
        });
      }
      return segs;
    },

    //根据时间段返回类名
    renderclass(boxData) {
      let boxclass = "green";
      let dom = null;
      //根据被选择的时间段返回相应颜色与文字
      //已经被占用的时间段
      this.useTime.forEach((item, index) => {
        // if (modalVisible.isexit && item.meeting_id == modalVisible.meetingId)
        //   return;
        let time_used = [
          moment(item.start_time, "HH:mm"),
          moment(item.end_time, "HH:mm"),
        ];
        //被使用的时间段返回灰色，边框颜色改变
        if (
          time_used[0].isBefore(boxData.timeTo) &&
          time_used[1].isAfter(boxData.timeFrom)
        ) {
          boxclass = "usecolor";
        }

        //会议室占用情况文字显示，显示在第一个时间条上
        // if (
        //   (time_used[0].isBefore(boxData.timeTo) &&
        //     time_used[0].isAfter(boxData.timeFrom)) || //结束时间在时间段之内或者结束时间等于时间段开始时间
        //   time_used[0].isSame(boxData.timeFrom)
        // ) {
        //   dom = (
        //     <div className="text-dom">
        //       <label htmlFor="">
        //         {item.creator_name}（{time_used[0].format("HH:mm")}-
        //         {time_used[1].format("HH:mm")}）：
        //       </label>
        //       <span title={item.title}>{item.title}</span>
        //     </div>
        //   );
        // }
      });

      //优先返回被使用的时间段
      if (boxclass === "usecolor") {
        return `commen-box ${boxclass}`;
      }

      // 可使用的时间段颜色
      // 开始时间在会议室可用之间之后，并且在关闭时间之前
      // 开始时间在当前时间条之间
      // console.log(_value.openTime.format('YYYY-MM-DD HH:mm:ss'))
      // if (
      //   _value.openTime.isSameOrBefore(thisitem.timeFrom) &&
      //   _value.closeTime.isAfter(thisitem.timeFrom)
      //   // (_value.openTime.isSameOrAfter(thisitem.timeFrom) &&
      //   //   _value.openTime.isSameOrBefore(thisitem.timeTo))
      // ) {
      //   boxclass = "green";
      // }

      //当前选择的时间段颜色
      if (
        moment(this.timeArea.start, "HH:mm").isBefore(boxData.timeTo) &&
        moment(this.timeArea.end, "HH:mm").isAfter(boxData.timeFrom)
      ) {
        boxclass = "blue-time";
      }
      return `commen-box ${boxclass}`;
    },

    //点击时间条
    handleChoose(row) {
      let array = { ...this.timeArea };
      if (!this.timeArea.start) {
        array = {
          start: row.timeFromtt,
          end: row.timeTott,
        };
      } else if (this.timeArea.start) {
        if (moment(this.timeArea.start, "HH:mm").isAfter(row.timeFrom)) {
          array = {
            start: row.timeFromtt,
            end: this.timeArea.end,
          };
        } else {
          array = {
            start: this.timeArea.start,
            end: row.timeTott,
          };
        }
      }

      //点击中间的条
      if (
        row.timeTo.isBefore(moment(this.timeArea.end, "HH:mm")) &&
        row.timeFrom.isAfter(moment(this.timeArea.start, "HH:mm"))
      ) {
        array = {
          start: row.timeFromtt,
          end: row.timeTott,
        };
      }

      //点击同一个条
      if (
        row.timeTott == this.timeArea.end &&
        row.timeFromtt == this.timeArea.start
      ) {
        array = {
          start: "",
          end: "",
        };
      }

      //判断时间段是否可用
      let pass = true;
      this.useTime.forEach((item, index) => {
        // if (modalVisible.isexit && item.meeting_id == modalData.meetingId)
        //   return;
        let time_used = [
          moment(item.start_time, "HH:mm"),
          moment(item.end_time, "HH:mm"),
        ];
        //占用时间段的开始时间在点击的时间段起始时间之前并且占用的结束时间在点击时间的开始时间之前 || 占用时间段的开始时间与时间条的相等
        if (
          (time_used[0].isBefore(row.timeFrom) &&
            time_used[1].isAfter(row.timeFrom)) ||
          (time_used[0].isSame(row.timeFrom) &&
            time_used[1].isAfter(row.timeFrom))
        ) {
          ElMessage.error("当前时间段已被选择");
          pass = false;
        }
        if (
          moment(array.start, "HH:mm").isBefore(time_used[0]) &&
          moment(array.end, "HH:mm").isAfter(time_used[1])
        ) {
          ElMessage.error("当前选择的时间段内有时间段已被选择");
          pass = false;
        }
      });
      if (pass) {
        this.timeArea = array;
        console.log(array);
      }
    },
  },
  mounted() {
    this.timeBoxArry = this.creatTime("00:00", "24:00", 15);
    this.timeTopArry = this.creatTime("00:00", "24:00", 60);
    console.log(this.timeTopArry);
  },
};
</script>

<style scoped lang="scss">
.meeting-showTime {
  width: 580px;
  height: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  .leftTime{
    width: 45px;
    text-align: right;
    font-size: 14px;
    padding-right: 5px;
  }
  .commen-box {
    width: 20px;
    height: 20px;
    background: #ccc;
    margin-right: 2px;
    margin-bottom: 2px;
  }
}
.usecolor {
  background: #c8c8c8 !important;
}
.green {
  background-color: #9eeac4 !important;
}
.blue-time {
  background-color: rgb(112, 122, 160) !important;
}
.hui {
  background: #ececec;
}

.topTime {
  display: flex;
  width: 534px;
  justify-content: space-around;
  margin-left: 45px;
}
</style>
